<template>
	<view class="columnbox wdh-100 content">
		<view class="list-box columnbox wdh-100">
			<view class="rowbox one-type wdh-100 spb" v-for="(item,index) in list" :key='index'>
				<view class="type-name">{{item.name}}</view>
				<u-icon @click="deletType(item.id)" name="trash" size="32rpx" color="#57bd6a"></u-icon>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		<view class="bottom-box wdh-100 rowbox">
			<view @click="addType" class="one-btn rowbox def-bgcol">添加分类</view>
		</view>
		<u-popup mode="center" :show='addflag' round="10rpx">
			<view class="spec-info columnbox">
				<view style="margin-top: 40rpx;">添加分类</view>
				<view class="rowbox wdh-100 one-info spb" style="margin: 40rpx 0;">
					<view>分类名称</view>
					<input v-model="name" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 spb">
					<view class="rowbox cancel-btn" @click="addflag=false">取消</view>
					<view class="rowbox confirm-btn def-bgcol" @click="confirmAdd">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addflag: false,
				name: '',
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			deletType(id) {
				uni.showModal({
					title: '是否要删除该分类',
					success: (res) => {
						if (res.confirm) {
							this.$req.post('/shanghu/goodtypedel', {
								id: id
							}).then(res => {
								this.getList()
							})
						}
					}
				})
			},
			addType() {
				this.name = ''
				this.addflag = true
			},
			confirmAdd() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					})
				} else {
					this.addflag = false
					uni.showLoading({
						title: '加载中'
					})
					this.$req.post('/shanghu/goodtypeadd', {
						name: this.name,
						shanghuid: uni.getStorageSync('userInfo').shanghuid
					}).then(res => {
						uni.hideLoading()
						this.getList()
					})
				}
			},
			getList() {
				this.$req.post('/shanghu/goodtype', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				}).then(res => {
					this.list = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		box-shadow: 0 0 4px 2px #eeecef;
	}

	.one-btn {
		width: 100%;
		font-size: 28rpx;
		height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.spec-info {
		width: 600rpx;
		padding: 20rpx 20rpx;
		padding-bottom: 0;
	}

	.cancel-btn {
		margin-top: 20rpx;
		width: 250rpx;
		height: 90rpx;
		border-radius: 10rpx;
		color: #606266;
		border: #eeecef solid 1px;
	}

	.confirm-btn {
		margin-top: 20rpx;
		width: 250rpx;
		height: 90rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.one-info {
		background: #f7f8fa;
		padding: 20rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;

		input {
			text-align: right;
			width: calc(100% - 200rpx);
			font-size: 28rpx;
		}
	}

	.list-box {
		padding: 0 20rpx;
	}

	.one-type {
		padding: 32rpx 0;
		border-bottom: #eeecef solid 1px;
		font-size: 28rpx;
	}

	.type-name {
		color: #161717;
	}
</style>